<script setup lang="ts">
import { onMounted } from 'vue'
import { useEditorStore } from '@/stores/editor'
import Renderer from '@/components/renderer/Renderer.vue'
import { provideRendererContext } from '@/composables/useRenderer'

const store = useEditorStore()
provideRendererContext()

onMounted(() => {
  const saved = localStorage.getItem('tmagic-preview-page')
  if (saved) {
    store.page = JSON.parse(saved)
  }
})

const page = store.page
</script>

<template>
  <div class="preview-page">
    <Renderer :node="page" />
  </div>
</template>

<style scoped>
.preview-page {
  padding: 20px;
  background: #fff;
  min-height: 100vh;
}
</style>
